<template>
  <div class="bug-table">
    <el-table :data="bugs" style="width: 100%" v-loading="loading">
      <el-table-column prop="title" label="标题" min-width="200">
        <template #default="{ row }">
          <div class="bug-title">
            <span>{{ row.title }}</span>
          </div>
        </template>
      </el-table-column>
      
      <el-table-column prop="severity" label="严重程度" width="100">
        <template #default="{ row }">
          <el-tag :type="getSeverityType(row.severity)" size="small">
            {{ getSeverityText(row.severity) }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)" size="small">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column prop="file" label="相关文件" min-width="150">
        <template #default="{ row }">
          <div v-if="row.file" class="file-info">
            <span>{{ row.file }}</span>
            <span v-if="row.line" class="line-number">:{{ row.line }}</span>
          </div>
          <span v-else class="no-file">-</span>
        </template>
      </el-table-column>
      
      <el-table-column prop="createdAt" label="创建时间" width="150">
        <template #default="{ row }">
          {{ formatDate(row.createdAt) }}
        </template>
      </el-table-column>
      
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button 
            type="primary" 
            size="small" 
            @click="$emit('fix', row)"
            :loading="loading && bugStore.fixingBugId === row.id"
            :disabled="row.status === 'fixing'"
          >
            <el-icon><Tools /></el-icon>
            {{ row.status === 'fixing' ? '修复中...' : '一键修复' }}
          </el-button>
          
          <el-button 
            type="info" 
            size="small" 
            @click="$emit('view', row)"
          >
            <el-icon><View /></el-icon>
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div v-if="bugs.length === 0" class="empty-state">
      <el-empty description="暂无 Bug 数据" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useBugStore } from '@/stores/bug'
import type { Bug } from '@/types/bug'
import { Tools, View } from '@element-plus/icons-vue'

defineProps<{
  bugs: Bug[]
  loading: boolean
}>()

defineEmits<{
  fix: [bug: Bug]
  view: [bug: Bug]
}>()

const bugStore = useBugStore()

const getSeverityType = (severity: Bug['severity']) => {
  const types = {
    low: 'info',
    medium: 'warning',
    high: 'danger',
    critical: 'danger'
  }
  return types[severity]
}

const getSeverityText = (severity: Bug['severity']) => {
  const texts = {
    low: '低',
    medium: '中',
    high: '高',
    critical: '严重'
  }
  return texts[severity]
}

const getStatusType = (status: Bug['status']) => {
  const types = {
    pending: 'info',
    fixing: 'warning',
    fixed: 'success',
    failed: 'danger'
  }
  return types[status]
}

const getStatusText = (status: Bug['status']) => {
  const texts = {
    pending: '待修复',
    fixing: '修复中',
    fixed: '已修复',
    failed: '失败'
  }
  return texts[status]
}

const formatDate = (date: Date) => {
  return new Intl.DateTimeFormat('zh-CN').format(date)
}
</script>

<style scoped>
.bug-table {
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.bug-title {
  font-weight: 500;
  color: #333;
}

.file-info {
  font-family: monospace;
  font-size: 12px;
  color: #666;
}

.line-number {
  color: #999;
}

.no-file {
  color: #999;
  font-style: italic;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}
</style>